<!-- src/views/home/components/arrow Arrow.vue 2023/5/24  @wanghaoran -->
<template>
  <div class="arrow-widget">
    <span class="arrow-widget-up" v-if="increaseOrNot(num)">{{ num }}<span class="blod gap">↑</span></span>
    <span class="arrow-widget-down" v-else>{{ num }}<span class="blod gap">↓</span></span>
  </div>

</template>

<script setup>
defineProps({
  direction: {
    type: String,
    default: 'up',
    validator(value) {
      return ['up', 'down'].includes(value)
    }
  },
  num: {
    type: [String, Number],
    default: 0
  }
})
/**
 * 判断字符串是正数还是负数
 * 数字前有-号带边减，无符号或有+号代表增加
 * @param str
 * @returns {boolean}
 */
const increaseOrNot = (str) => {
  return Number(str) >= 0;
}
/**
 * 去掉字符串前面+-号
 * @param str
 * @returns {*}
 */
const delSymbol = (str) => {
  if (str) {
    str = str.toString()
    if (str.length > 0 && (str.charAt(0) === '-' || str.charAt(0) === '+')) {
      str = str.slice(1)
    }
    return str
  }
  return str
}
</script>

<style scoped>
.arrow-widget {
  display: inline;
}

.arrow-widget-up {
  color: #FF4848;
}

.arrow-widget-down {
  color: #0DB565;
}

.blod {
  font-weight: bold;
}

.gap{
  margin-left: 2px;
}
</style>